/*
 * 店铺信息修改
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-12 09:45:40
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>


</style>
<template>
	<div class="v-cutomer-store-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth"
			name="create__form">

			<Form-item
				:label="$t('store.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('store.please_enter_name')"
					name="create__name"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('store.phone')"
				prop="phone">
				<i-input
					v-model="formValidate.phone"
					:placeholder="$t('store.please_enter_phone')"
					name="create__phone"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('store.type')"
				prop="type">
				<RadioGroup v-model="formValidate.type">
					<Radio
						label="1"
						name="create__headquarters">
						<span>{{ $t('store.headquarters') }}</span>
					</Radio>
					<Radio
						label="2"
						name="create__subbranch">
						<span>{{ $t('store.subbranch') }}</span>
					</Radio>
				</RadioGroup>
			</Form-item>

			<Form-item
				v-if="$i18n.locale === 'zh-CN'"
				:label="$t('store.province_city_district')"
				prop="resArr">
				<!-- <al-cascader
					v-model="formValidate.resArr"
					:filterable="true"
					data-type="name"
					auto
					level="2" /> -->
				<areaSelector
					v-model="formValidate.resArr"
					:gutter="0"
					searchable
					data-type="name"
					auto
					level="2"/>
			</Form-item>

			<Form-item
				:label="$t('store.address')"
				prop="address">
				<i-input
					v-model="formValidate.address"
					:placeholder="$t('store.please_enter_address')"
					name="create__address"
					type="text"/>
			</Form-item>

			<!-- <Form-item label="店铺备注">
				<i-input
					v-model="formValidate.remark"
					type="text"
					placeholder="请输入店铺备注"/>
			</Form-item> -->

			<Form-item
				:label="$t('store.store_logo')"
				prop="store_img">
				<Uploader
					ref="store_img"
					:default.sync="store_img_src"
					@on-remove="(file)=>{handleRemove('store_img',file)}"
					@on-change="(file)=>{handleChange('store_img',file)}">
					{{ $t('common.pic_tip') }}
				</Uploader>
			</Form-item>

			<Form-item
				v-if="Number(getUserInfo.has_youzan) === 1"
				:label="$t('store.has_youzan')"
				prop="has_youzan">
				<i-switch
					v-model="formValidate.has_youzan"
					name="create__has_youzan"
					true-value="1"
					false-value="0">
					<Icon
						slot="open"
						type="android-done"/>
					<Icon
						slot="close"
						type="android-close"/>
				</i-switch>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					name="create__submit"
					@click="validateData('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import { mapGetters } from 'vuex';

import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins

import areaSelector from 'src/views/component/area-selector';
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'CustomerStoreEdit',

	components: {
		areaSelector,
		Uploader,
	},

	mixins: [showLocalImage],

	props: {
		customerStoreDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},

	data() {
		return {
			formValidate: {
				name: '', // 店铺名称

				phone: '', // 店铺管理员电话

				type: '', // 店铺类型

				is_deleted: '',

				resArr: [], // 省市区

				address: '', // 地址

				// remark: '', // 备注信息

				store_img: '', // 店铺头像

				has_youzan: '', // 开通有赞

			}, // 更新店铺信息表单

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.name') }),
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.password') }),
						trigger: 'blur,change',
					},
					{
						required: true,
						message: this.$t('validate.min', { min: 6, field: this.$t('store.password') }),
						trigger: 'blur,change',
					},
				],
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.email') }),
						trigger: 'blur,change',
					},
					{
						required: true,
						message: this.$t('validate.url'),
						trigger: 'blur,change',
					},
				],
				phone: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.phone') }),
						trigger: 'blur,change',
					},
				],
				resArr: [
					{
						required: false,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('common.area') }),
						trigger: 'blur,change',
					},
				],
				address: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.address') }),
						trigger: 'blur,change',
					},
				],
				type: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.type') }),
						trigger: 'blur,change',
					},
				],
				store_img: [
					// { validator: validateImage, trigger: 'blur,change' },
				],

			},

			// 上传的图片地址
			store_img_src: '',

		};
	},
	computed: {
		...mapGetters('userToken', [
			'getUserInfo',
		]),

		labelWidth() {
			return this.$i18n.locale === 'zh-CN' ? 80 : 140;
		},
	},

	created() {
		this.initFormData();
	},

	methods: {
		/**
		 *  初始化表单
		 * 	@return {undefined}
		 */
		initFormData() {
			if (this.customerStoreDetail) {
				this.formValidate.name = this.customerStoreDetail.name;

				this.formValidate.phone = this.customerStoreDetail.phone;

				this.formValidate.type = String(this.customerStoreDetail.type);

				this.formValidate.is_deleted = String(this.customerStoreDetail.is_deleted);

				/* 给省市区赋值 */
				if (this.customerStoreDetail.province) {
					this.formValidate.resArr = [this.customerStoreDetail.province, this.customerStoreDetail.city, this.customerStoreDetail.district];
				} else {
					this.formValidate.resArr = [];
				}
				/* END */

				this.formValidate.address = this.customerStoreDetail.address;

				// this.formValidate.remark = (this.customerStoreDetail.remark === 'null' ? '' : this.customerStoreDetail.remark);

				this.formValidate.store_img = this.customerStoreDetail.store_img;

				this.formValidate.has_youzan = String(this.customerStoreDetail.has_youzan) || '0';

				this.store_img_src = this.customerStoreDetail.store_img;
			}
		},

		/**
		 * 删除图片
		 * @param {String} filed {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			// this.$refs.formValidate.validateField(field);
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			// this.$refs.formValidate.validateField(field);
		},

		/**
         * 校验数据
         * @return {undefined}
         */
		validateData(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('update', this.customerStoreDetail.id, this.formDataCreate());
				} else {
					this.$Message.error(this.$('common.invalid_form_data'));
				}
			});
		},
		/**
         * 手动拼接formdata数据
         * @return {Object}
         */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				name: this.formValidate.name,

				phone: this.formValidate.phone,

				type: this.formValidate.type,

				is_deleted: this.formValidate.is_deleted,

				province: this.formValidate.resArr[0], // 省

				city: this.formValidate.resArr[1], // 市

				district: this.formValidate.resArr[2], // 区

				address: this.formValidate.address,

				// remark: this.formValidate.remark,

				store_img: this.formValidate.store_img,

				has_youzan: this.formValidate.has_youzan,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				if (typeof new_object[key] !== 'undefined' && new_object[key]) {
					form_data.append(key, new_object[key]);
				}
			});

			return form_data;
		},

	},
};
</script>
